<template>
  <div class="video-card__item group w-full h-full">
    <a @mouseover="hover = true" @mouseleave="hover = false" @click="gotodetai(item)">
      <span class="vrshow" v-if="props.item?.isvr">VR</span>
      <div class="video-card__body w-full relative overflow-hidden rounded-md z-1">
        <div
          class="w-full aspect-video group-data-[mode=both]:aspect-[16/18] supports-[not_(aspect-ratio:auto)]:aspect-card-video supports-[not_(aspect-ratio:auto)]:group-data-[mode=both]:aspect-card-doubleVideo"
        ></div>
        <div class="w-full flex flex-col absolute left-0 right-0 top-0 bottom-0">
          <div v-if="hover">
            <video
              :src="props.item?.videoSkimUrl"
              class="w-full h-full object-cover absolute left-0 right-0 bottom-0 top-0 videoZindex"
              preload="auto"
              playsinline=""
              autoplay=""
              muted=""
              loop=""
            ></video>
            <div
              class="video-card__body-attr flex items-center absolute left-0 right-0 bottom-0 text-base text-neutral-20 px-4 py-2 bg-gradient-to-b from-[#11111100] to-[#00000099] z-2 justify-start space-x-3"
            >
              <span>下载量:{{ item?.downloadNum ? item?.downloadNum : "0" }}</span
              ><span>时长:{{ item?.duration ? item?.duration : "" }}</span>
              <span>帧速率:{{ item?.frameRate ? item?.frameRate : "" }}</span>
            </div>
          </div>
          <div v-else>
            <img :src="props.item?.thumbnailUrl" />
            <div
              class="video-card__body-attr flex items-center absolute left-0 right-0 bottom-0 text-base text-neutral-20 px-4 py-2 bg-gradient-to-b from-[#11111100] to-[#00000099] z-2 justify-start space-x-3"
            >
              <span>{{ item?.name }}</span
              ><span>{{ item?.keyword }}</span>
            </div>
          </div>
        </div>
      </div>
    </a>
  </div>
</template>

<script setup lang="ts">
import { defineProps, PropType, ref } from "vue";
import { HdMaterialVo } from "../common/utils/homeTpye";
import { useRouter } from "vue-router";
const props = defineProps({
  item: {
    type: Object as PropType<HdMaterialVo>,
  },
});
const hover = ref(false);
const router = useRouter();
const gotodetai = (item: HdMaterialVo) => {
  router.push("/detail/" + item.id);
};
</script>

<style lang="scss" scoped>
.vrshow {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  display: block;
  background: hsl(0.33deg 77.02% 46.08%);
  padding: 2px 15px;
  border-radius: 0 10px 0 5px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}
.video-card__item {
  position: relative;
}
.video-card__item:hover img {
  animation: fadeOut 2s ease-in-out forwards;
}
.videoZindex {
  animation: fadeIn 2s ease forwards;
}
</style>
